<template>
    <div class="home-main">
        <ul class="hlist">
            <li v-for="(l,i) in films" :key="i" class="hli">
                <router-link class="hitem" :to="{name:'film',params:{filmId:l.filmId},query:{name:l.name}} ">
                    <img :src="l.poster" alt="" class="hleft">
                    <div class="hright">
                        <div class="name">
                            <span >{{l.name}}</span>
                            <span class="type">{{l.item.name}}</span>
                        </div>
                        <div class="hlabel ">
                            观众评分: <span class="grade"  v-if="type==1"> {{l.grade}}</span>
                            <span class="grade"  v-else> 暂无评分</span>
                        </div>
                        <div class="hlabel van-ellipsis actors">
                            主演: <span class="" v-for="(l,i) in l.actors" :key='i'>
                                {{l.name}}
                            </span>
                        </div>
                        <div class="hlabel">
                            <span  >{{l.nation}}  | </span>
                            
                            <span>{{l.runtime}}分钟</span>
                        </div>
                    </div>
                </router-link>

                <van-button class="buybtn" @click.stop="gotofilmcinemas(l)" :class="type==1?'gou':'yu'"> {{type==1?'购票':'预购'}} </van-button>
            </li>
        </ul>
    </div>
</template>


<script>
export default {
    props:{
        films:Array,
        type:[String,Number]
    },
    methods:{
        gotofilmcinemas(l){
            this.$router.push({
                name:'film-cinemas',
                params:{
                    filmId:l.filmId,
                },
                query:{
                    name:l.name 
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
 .home-main{
     padding-bottom: 50px;
    .hlist{
        .hli{
            width:100%;
            border-bottom:1px solid #ededed;
            position: relative;
            .hitem{
                width:100%;
                display: flex;
                padding:15px;
                .hleft{
                    width:66px;
                    height:94px;
                    flex-shrink: 0;
                }
                .hright{
                    flex:1;
                    padding:0 10px;
                    position: relative;
                    .name{
                            max-width: calc(100% - 25px);
                            color: #191a1b;
                            font-size: 16px;
                            height: 22px;
                            line-height: 22px;
                            margin-right: 5px;
                            overflow: hidden;
                            -o-text-overflow: ellipsis;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            display: flex;
                            align-items: center;
                             .type{
                                    font-size: 9px;
                                    color: #fff;
                                    background-color: #d2d6dc;
                                    height: 14px;
                                    line-height: 14px;
                                    padding: 0 2px;
                                    border-radius: 2px;
                                    margin-left: 5px;
                             }
                    }

                    .hlabel{
                        font-size: 13px;
                        margin-top: 4px;
                        color: #797d82;
                    }
                    .actors{
                        width:240px;
                    }
                   
                }
            }
            .gou{
                color: #ff5f16;
                border:0.5px solid #ff5f16;
            }
            .yu{
                color: #ffb232;
                border:0.5px solid #ffb232;
            }
            .buybtn{
                line-height: 25px;
                height: 25px;
                width: 50px;
                
                font-size: 13px;
                text-align: center;
                border-radius: 2px;
                position: relative;
                
                position: absolute;
                right:15px;
                top:50%;
                transform: translateY(-50%);
                padding:0;
            }
        }
    }
}
</style>